<template>
  <div class="tetris-game-container">
    <div class="game-header">
      <h1>🧩 俄罗斯方块</h1>
      <div class="game-stats">
        <div class="stat-card">
          <div class="stat-label">分数</div>
          <div class="stat-value">{{ score.toLocaleString() }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">等级</div>
          <div class="stat-value">{{ level }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">消行</div>
          <div class="stat-value">{{ linesCleared }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">最高分</div>
          <div class="stat-value">{{ highScore.toLocaleString() }}</div>
        </div>
      </div>
    </div>

    <div class="game-content">
      <!-- 左侧信息面板 -->
      <div class="left-panel">
        <div class="next-piece-container">
          <h3>下一个</h3>
          <div class="next-piece-grid">
            <div
              v-for="(row, y) in nextPieceGrid"
              :key="y"
              class="next-piece-row"
            >
              <div
                v-for="(cell, x) in row"
                :key="x"
                :class="['next-piece-cell', { filled: cell }]"
                :style="{ backgroundColor: cell ? getTetrominoColor(nextPiece.type) : '' }"
              ></div>
            </div>
          </div>
        </div>

        <div class="hold-piece-container">
          <h3>暂存</h3>
          <div class="hold-piece-grid">
            <div
              v-for="(row, y) in holdPieceGrid"
              :key="y"
              class="hold-piece-row"
            >
              <div
                v-for="(cell, x) in row"
                :key="x"
                :class="['hold-piece-cell', { filled: cell }]"
                :style="{ backgroundColor: cell ? getTetrominoColor(holdPiece?.type) : '' }"
              ></div>
            </div>
          </div>
        </div>

        <div class="controls-info">
          <h3>操作说明</h3>
          <div class="control-item">
            <span class="key">A/D</span>
            <span class="action">左右移动</span>
          </div>
          <div class="control-item">
            <span class="key">S</span>
            <span class="action">快速下降</span>
          </div>
          <div class="control-item">
            <span class="key">W/↑</span>
            <span class="action">旋转</span>
          </div>
          <div class="control-item">
            <span class="key">空格</span>
            <span class="action">瞬间下降</span>
          </div>
          <div class="control-item">
            <span class="key">C</span>
            <span class="action">暂存方块</span>
          </div>
          <div class="control-item">
            <span class="key">P</span>
            <span class="action">暂停</span>
          </div>
        </div>
      </div>

      <!-- 游戏主区域 -->
      <div class="game-main">
        <div class="game-controls">
          <button @click="startGame" :disabled="gameRunning" class="control-btn start">
            {{ gameRunning ? '游戏进行中' : '开始游戏' }}
          </button>
          <button @click="pauseGame" :disabled="!gameRunning" class="control-btn pause">
            {{ gamePaused ? '继续' : '暂停' }}
          </button>
          <button @click="resetGame" class="control-btn reset">重新开始</button>
        </div>

        <div class="game-board-wrapper">
          <div 
            class="game-board"
            @keydown="handleKeyPress"
            tabindex="0"
            ref="gameBoard"
          >
            <div
              v-for="(row, y) in gameGrid"
              :key="y"
              class="game-row"
            >
              <div
                v-for="(cell, x) in row"
                :key="x"
                :class="[
                  'game-cell',
                  {
                    'filled': cell.filled,
                    'current-piece': isCurrentPiece(x, y),
                    'ghost-piece': isGhostPiece(x, y),
                    'clearing': cell.clearing
                  }
                ]"
                :style="getCellStyle(cell, x, y)"
              ></div>
            </div>
          </div>

          <!-- 游戏状态覆盖层 -->
          <div v-if="!gameRunning && !gameOver" class="game-overlay start-overlay">
            <div class="overlay-content">
              <h2>🎮 准备开始</h2>
              <p>经典俄罗斯方块游戏</p>
              <p>消除完整的行来获得分数</p>
              <button @click="startGame" class="overlay-btn">开始游戏</button>
            </div>
          </div>

          <div v-if="gamePaused" class="game-overlay pause-overlay">
            <div class="overlay-content">
              <h2>⏸️ 游戏暂停</h2>
              <p>按 P 键或点击继续按钮恢复游戏</p>
              <button @click="pauseGame" class="overlay-btn">继续游戏</button>
            </div>
          </div>

          <div v-if="gameOver" class="game-overlay game-over-overlay">
            <div class="overlay-content">
              <h2>💀 游戏结束</h2>
              <p>最终分数: <strong>{{ score.toLocaleString() }}</strong></p>
              <p>达到等级: <strong>{{ level }}</strong></p>
              <p>消除行数: <strong>{{ linesCleared }}</strong></p>
              <p v-if="isNewHighScore" class="new-record">🎉 新纪录！</p>
              <button @click="resetGame" class="overlay-btn">重新开始</button>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧信息面板 -->
      <div class="right-panel">
        <div class="combo-display" v-if="combo > 1">
          <div class="combo-text">{{ combo }}x 连击!</div>
          <div class="combo-effect"></div>
        </div>

        <div class="level-progress">
          <h3>等级进度</h3>
          <div class="progress-bar">
            <div 
              class="progress-fill"
              :style="{ width: (linesCleared % 10) * 10 + '%' }"
            ></div>
          </div>
          <div class="progress-text">{{ linesCleared % 10 }}/10</div>
        </div>

        <div class="speed-display">
          <h3>下降速度</h3>
          <div class="speed-value">{{ Math.max(1000 - (level - 1) * 100, 100) }}ms</div>
        </div>

        <div class="achievements">
          <h3>成就</h3>
          <div class="achievement-list">
            <div 
              v-for="achievement in achievements"
              :key="achievement.id"
              :class="['achievement', { unlocked: achievement.unlocked }]"
            >
              <div class="achievement-icon">{{ achievement.icon }}</div>
              <div class="achievement-text">
                <div class="achievement-name">{{ achievement.name }}</div>
                <div class="achievement-desc">{{ achievement.description }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 粒子效果容器 -->
    <div class="particles-container">
      <div
        v-for="particle in particles"
        :key="particle.id"
        class="particle"
        :style="particle.style"
      ></div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted, onUnmounted, computed, nextTick } from 'vue'

export default {
  name: 'TetrisGame',
  setup() {
    // 游戏配置
    const BOARD_WIDTH = 10
    const BOARD_HEIGHT = 20
    const CELL_SIZE = 30
    
    // 方块形状定义
    const TETROMINOES = {
      I: {
        shape: [
          [0, 0, 0, 0],
          [1, 1, 1, 1],
          [0, 0, 0, 0],
          [0, 0, 0, 0]
        ],
        color: '#00f5ff'
      },
      O: {
        shape: [
          [1, 1],
          [1, 1]
        ],
        color: '#ffff00'
      },
      T: {
        shape: [
          [0, 1, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        color: '#a000f0'
      },
      S: {
        shape: [
          [0, 1, 1],
          [1, 1, 0],
          [0, 0, 0]
        ],
        color: '#00f000'
      },
      Z: {
        shape: [
          [1, 1, 0],
          [0, 1, 1],
          [0, 0, 0]
        ],
        color: '#f00000'
      },
      J: {
        shape: [
          [1, 0, 0],
          [1, 1, 1],
          [0, 0, 0]
        ],
        color: '#0000f0'
      },
      L: {
        shape: [
          [0, 0, 1],
          [1, 1, 1],
          [0, 0, 0]
        ],
        color: '#ff7f00'
      }
    }
    
    // 游戏状态
    const gameRunning = ref(false)
    const gamePaused = ref(false)
    const gameOver = ref(false)
    const score = ref(0)
    const level = ref(1)
    const linesCleared = ref(0)
    const highScore = ref(parseInt(localStorage.getItem('tetrisHighScore') || '0'))
    const isNewHighScore = ref(false)
    const combo = ref(0)
    
    // 游戏网格
    const gameGrid = ref([])
    
    // 当前方块
    const currentPiece = ref(null)
    const currentPosition = ref({ x: 0, y: 0 })
    const ghostPosition = ref({ x: 0, y: 0 })
    
    // 下一个方块
    const nextPiece = ref(null)
    
    // 暂存方块
    const holdPiece = ref(null)
    const canHold = ref(true)
    
    // 粒子效果
    const particles = ref([])
    
    // 成就系统
    const achievements = ref([
      { id: 1, name: '初学者', description: '消除第一行', icon: '🎯', unlocked: false },
      { id: 2, name: '连击高手', description: '达成4连击', icon: '🔥', unlocked: false },
      { id: 3, name: '速度之王', description: '达到等级5', icon: '⚡', unlocked: false },
      { id: 4, name: '方块大师', description: '得分超过10000', icon: '👑', unlocked: false },
      { id: 5, name: '完美主义', description: '一次消除4行', icon: '💎', unlocked: false }
    ])
    
    // 游戏循环
    let gameLoop = null
    const gameBoard = ref(null)
    
    // 初始化游戏网格
    const initializeGrid = () => {
      gameGrid.value = Array(BOARD_HEIGHT).fill().map(() => 
        Array(BOARD_WIDTH).fill().map(() => ({ filled: false, color: '', clearing: false }))
      )
    }
    
    // 获取随机方块类型
    const getRandomTetromino = () => {
      const types = Object.keys(TETROMINOES)
      const type = types[Math.floor(Math.random() * types.length)]
      return {
        type,
        shape: TETROMINOES[type].shape,
        color: TETROMINOES[type].color
      }
    }
    
    // 生成新方块
    const spawnNewPiece = () => {
      if (!nextPiece.value) {
        nextPiece.value = getRandomTetromino()
      }
      
      currentPiece.value = nextPiece.value
      nextPiece.value = getRandomTetromino()
      
      currentPosition.value = {
        x: Math.floor(BOARD_WIDTH / 2) - Math.floor(currentPiece.value.shape[0].length / 2),
        y: 0
      }
      
      updateGhostPosition()
      canHold.value = true
      
      // 检查游戏结束
      if (checkCollision(currentPiece.value.shape, currentPosition.value)) {
        endGame()
      }
    }
    
    // 检查碰撞
    const checkCollision = (shape, position) => {
      for (let y = 0; y < shape.length; y++) {
        for (let x = 0; x < shape[y].length; x++) {
          if (shape[y][x]) {
            const newX = position.x + x
            const newY = position.y + y
            
            if (newX < 0 || newX >= BOARD_WIDTH || newY >= BOARD_HEIGHT) {
              return true
            }
            
            if (newY >= 0 && gameGrid.value[newY][newX].filled) {
              return true
            }
          }
        }
      }
      return false
    }
    
    // 旋转方块
    const rotatePiece = (shape) => {
      const rotated = shape[0].map((_, index) =>
        shape.map(row => row[index]).reverse()
      )
      return rotated
    }
    
    // 移动方块
    const movePiece = (dx, dy) => {
      if (!currentPiece.value || !gameRunning.value || gamePaused.value) return false
      
      const newPosition = {
        x: currentPosition.value.x + dx,
        y: currentPosition.value.y + dy
      }
      
      if (!checkCollision(currentPiece.value.shape, newPosition)) {
        currentPosition.value = newPosition
        updateGhostPosition()
        return true
      }
      
      return false
    }
    
    // 旋转当前方块
    const rotateCurrentPiece = () => {
      if (!currentPiece.value || !gameRunning.value || gamePaused.value) return
      
      const rotatedShape = rotatePiece(currentPiece.value.shape)
      
      // 尝试旋转，如果碰撞则尝试踢墙
      const kickTests = [
        { x: 0, y: 0 },
        { x: -1, y: 0 },
        { x: 1, y: 0 },
        { x: 0, y: -1 }
      ]
      
      for (const kick of kickTests) {
        const testPosition = {
          x: currentPosition.value.x + kick.x,
          y: currentPosition.value.y + kick.y
        }
        
        if (!checkCollision(rotatedShape, testPosition)) {
          currentPiece.value.shape = rotatedShape
          currentPosition.value = testPosition
          updateGhostPosition()
          return
        }
      }
    }
    
    // 更新幽灵方块位置
    const updateGhostPosition = () => {
      if (!currentPiece.value) return
      
      let ghostY = currentPosition.value.y
      while (!checkCollision(currentPiece.value.shape, { x: currentPosition.value.x, y: ghostY + 1 })) {
        ghostY++
      }
      
      ghostPosition.value = { x: currentPosition.value.x, y: ghostY }
    }
    
    // 硬降（瞬间下降）
    const hardDrop = () => {
      if (!currentPiece.value || !gameRunning.value || gamePaused.value) return
      
      currentPosition.value = { ...ghostPosition.value }
      placePiece()
    }
    
    // 放置方块
    const placePiece = () => {
      if (!currentPiece.value) return
      
      // 将方块放置到网格中
      for (let y = 0; y < currentPiece.value.shape.length; y++) {
        for (let x = 0; x < currentPiece.value.shape[y].length; x++) {
          if (currentPiece.value.shape[y][x]) {
            const gridX = currentPosition.value.x + x
            const gridY = currentPosition.value.y + y
            
            if (gridY >= 0) {
              gameGrid.value[gridY][gridX] = {
                filled: true,
                color: currentPiece.value.color,
                clearing: false
              }
            }
          }
        }
      }
      
      // 检查消行
      checkLines()
      
      // 生成新方块
      spawnNewPiece()
    }
    
    // 检查消行
    const checkLines = () => {
      const linesToClear = []
      
      for (let y = BOARD_HEIGHT - 1; y >= 0; y--) {
        if (gameGrid.value[y].every(cell => cell.filled)) {
          linesToClear.push(y)
        }
      }
      
      if (linesToClear.length > 0) {
        clearLines(linesToClear)
      }
    }
    
    // 消除行
    const clearLines = (lines) => {
      // 标记要清除的行
      lines.forEach(lineIndex => {
        gameGrid.value[lineIndex].forEach(cell => {
          cell.clearing = true
        })
      })
      
      // 创建消行特效
      createLinesClearEffect(lines)
      
      // 延迟后实际清除行
      setTimeout(() => {
        // 移除标记的行
        lines.sort((a, b) => b - a).forEach(lineIndex => {
          gameGrid.value.splice(lineIndex, 1)
          gameGrid.value.unshift(Array(BOARD_WIDTH).fill().map(() => ({ filled: false, color: '', clearing: false })))
        })
        
        // 更新分数和等级
        updateScore(lines.length)
        updateLevel()
        updateCombo(lines.length)
        checkAchievements(lines.length)
      }, 300)
    }
    
    // 更新分数
    const updateScore = (linesCount) => {
      const baseScore = [0, 100, 300, 500, 800][linesCount] || 0
      const levelMultiplier = level.value
      const comboMultiplier = Math.max(1, combo.value)
      
      score.value += baseScore * levelMultiplier * comboMultiplier
      linesCleared.value += linesCount
    }
    
    // 更新等级
    const updateLevel = () => {
      const newLevel = Math.floor(linesCleared.value / 10) + 1
      if (newLevel > level.value) {
        level.value = newLevel
        createLevelUpEffect()
      }
    }
    
    // 更新连击
    const updateCombo = (linesCount) => {
      if (linesCount > 0) {
        combo.value++
      } else {
        combo.value = 0
      }
    }
    
    // 检查成就
    const checkAchievements = (linesCount) => {
      // 初学者：消除第一行
      if (linesCleared.value >= 1 && !achievements.value[0].unlocked) {
        unlockAchievement(0)
      }
      
      // 连击高手：达成4连击
      if (combo.value >= 4 && !achievements.value[1].unlocked) {
        unlockAchievement(1)
      }
      
      // 速度之王：达到等级5
      if (level.value >= 5 && !achievements.value[2].unlocked) {
        unlockAchievement(2)
      }
      
      // 方块大师：得分超过10000
      if (score.value >= 10000 && !achievements.value[3].unlocked) {
        unlockAchievement(3)
      }
      
      // 完美主义：一次消除4行
      if (linesCount === 4 && !achievements.value[4].unlocked) {
        unlockAchievement(4)
      }
    }
    
    // 解锁成就
    const unlockAchievement = (index) => {
      achievements.value[index].unlocked = true
      createAchievementEffect(achievements.value[index])
    }
    
    // 暂存方块
    const holdCurrentPiece = () => {
      if (!canHold.value || !currentPiece.value || !gameRunning.value || gamePaused.value) return
      
      if (holdPiece.value) {
        // 交换当前方块和暂存方块
        const temp = holdPiece.value
        holdPiece.value = currentPiece.value
        currentPiece.value = temp
      } else {
        // 暂存当前方块，生成新方块
        holdPiece.value = currentPiece.value
        spawnNewPiece()
        return
      }
      
      // 重置位置
      currentPosition.value = {
        x: Math.floor(BOARD_WIDTH / 2) - Math.floor(currentPiece.value.shape[0].length / 2),
        y: 0
      }
      
      updateGhostPosition()
      canHold.value = false
    }
    
    // 游戏主循环
    const gameStep = () => {
      if (!gameRunning.value || gamePaused.value) return
      
      if (!movePiece(0, 1)) {
        placePiece()
      }
    }
    
    // 键盘控制
    const handleKeyPress = (event) => {
      if (!gameRunning.value) return
      
      const key = event.key.toLowerCase()
      
      switch (key) {
        case 'a':
        case 'arrowleft':
          movePiece(-1, 0)
          break
        case 'd':
        case 'arrowright':
          movePiece(1, 0)
          break
        case 's':
        case 'arrowdown':
          movePiece(0, 1)
          break
        case 'w':
        case 'arrowup':
          rotateCurrentPiece()
          break
        case ' ':
          hardDrop()
          break
        case 'c':
          holdCurrentPiece()
          break
        case 'p':
          pauseGame()
          break
      }
      
      event.preventDefault()
    }
    
    // 游戏控制方法
    const startGame = () => {
      if (gameRunning.value) return
      
      gameRunning.value = true
      gamePaused.value = false
      gameOver.value = false
      
      initializeGrid()
      spawnNewPiece()
      
      gameLoop = setInterval(gameStep, Math.max(1000 - (level.value - 1) * 100, 100))
      
      nextTick(() => {
        gameBoard.value?.focus()
      })
    }
    
    const pauseGame = () => {
      if (!gameRunning.value) return
      
      gamePaused.value = !gamePaused.value
      
      if (gamePaused.value) {
        clearInterval(gameLoop)
      } else {
        gameLoop = setInterval(gameStep, Math.max(1000 - (level.value - 1) * 100, 100))
        nextTick(() => {
          gameBoard.value?.focus()
        })
      }
    }
    
    const resetGame = () => {
      clearInterval(gameLoop)
      
      gameRunning.value = false
      gamePaused.value = false
      gameOver.value = false
      score.value = 0
      level.value = 1
      linesCleared.value = 0
      combo.value = 0
      isNewHighScore.value = false
      
      currentPiece.value = null
      nextPiece.value = null
      holdPiece.value = null
      canHold.value = true
      
      particles.value = []
      
      // 重置成就
      achievements.value.forEach(achievement => {
        achievement.unlocked = false
      })
      
      initializeGrid()
    }
    
    const endGame = () => {
      clearInterval(gameLoop)
      
      gameRunning.value = false
      gameOver.value = true
      
      // 检查最高分
      if (score.value > highScore.value) {
        highScore.value = score.value
        isNewHighScore.value = true
        localStorage.setItem('tetrisHighScore', score.value.toString())
      }
    }
    
    // 计算属性
    const nextPieceGrid = computed(() => {
      if (!nextPiece.value) return Array(4).fill().map(() => Array(4).fill(false))
      
      const grid = Array(4).fill().map(() => Array(4).fill(false))
      const shape = nextPiece.value.shape
      
      for (let y = 0; y < shape.length; y++) {
        for (let x = 0; x < shape[y].length; x++) {
          if (shape[y][x]) {
            grid[y][x] = true
          }
        }
      }
      
      return grid
    })
    
    const holdPieceGrid = computed(() => {
      if (!holdPiece.value) return Array(4).fill().map(() => Array(4).fill(false))
      
      const grid = Array(4).fill().map(() => Array(4).fill(false))
      const shape = holdPiece.value.shape
      
      for (let y = 0; y < shape.length; y++) {
        for (let x = 0; x < shape[y].length; x++) {
          if (shape[y][x]) {
            grid[y][x] = true
          }
        }
      }
      
      return grid
    })
    
    // 辅助方法
    const isCurrentPiece = (x, y) => {
      if (!currentPiece.value) return false
      
      const relativeX = x - currentPosition.value.x
      const relativeY = y - currentPosition.value.y
      
      if (relativeX >= 0 && relativeX < currentPiece.value.shape[0].length &&
          relativeY >= 0 && relativeY < currentPiece.value.shape.length) {
        return currentPiece.value.shape[relativeY][relativeX]
      }
      
      return false
    }
    
    const isGhostPiece = (x, y) => {
      if (!currentPiece.value || y === currentPosition.value.y) return false
      
      const relativeX = x - ghostPosition.value.x
      const relativeY = y - ghostPosition.value.y
      
      if (relativeX >= 0 && relativeX < currentPiece.value.shape[0].length &&
          relativeY >= 0 && relativeY < currentPiece.value.shape.length) {
        return currentPiece.value.shape[relativeY][relativeX]
      }
      
      return false
    }
    
    const getCellStyle = (cell, x, y) => {
      if (isCurrentPiece(x, y)) {
        return { backgroundColor: currentPiece.value.color }
      }
      
      if (isGhostPiece(x, y)) {
        return { 
          backgroundColor: 'transparent',
          border: `2px solid ${currentPiece.value.color}`,
          opacity: 0.5
        }
      }
      
      if (cell.filled) {
        return { backgroundColor: cell.color }
      }
      
      return {}
    }
    
    const getTetrominoColor = (type) => {
      return TETROMINOES[type]?.color || '#ffffff'
    }
    
    // 特效方法
    const createLinesClearEffect = (lines) => {
      lines.forEach(lineIndex => {
        for (let x = 0; x < BOARD_WIDTH; x++) {
          createParticle(x * CELL_SIZE, lineIndex * CELL_SIZE, '#ffff00')
        }
      })
    }
    
    const createLevelUpEffect = () => {
      for (let i = 0; i < 20; i++) {
        setTimeout(() => {
          createParticle(
            Math.random() * 300,
            Math.random() * 600,
            '#00ff00'
          )
        }, i * 50)
      }
    }
    
    const createAchievementEffect = (achievement) => {
      // 创建成就解锁特效
      console.log(`成就解锁: ${achievement.name}`)
    }
    
    const createParticle = (x, y, color) => {
      const particle = {
        id: Date.now() + Math.random(),
        style: {
          position: 'absolute',
          left: `${x}px`,
          top: `${y}px`,
          width: '6px',
          height: '6px',
          backgroundColor: color,
          borderRadius: '50%',
          pointerEvents: 'none',
          animation: 'particleFloat 1s ease-out forwards'
        }
      }
      
      particles.value.push(particle)
      
      setTimeout(() => {
        particles.value = particles.value.filter(p => p.id !== particle.id)
      }, 1000)
    }
    
    // 生命周期
    onMounted(() => {
      initializeGrid()
      document.addEventListener('keydown', handleKeyPress)
    })
    
    onUnmounted(() => {
      clearInterval(gameLoop)
      document.removeEventListener('keydown', handleKeyPress)
    })
    
    return {
      // 响应式数据
      gameRunning,
      gamePaused,
      gameOver,
      score,
      level,
      linesCleared,
      highScore,
      isNewHighScore,
      combo,
      gameGrid,
      currentPiece,
      nextPiece,
      holdPiece,
      particles,
      achievements,
      gameBoard,
      
      // 计算属性
      nextPieceGrid,
      holdPieceGrid,
      
      // 方法
      startGame,
      pauseGame,
      resetGame,
      handleKeyPress,
      isCurrentPiece,
      isGhostPiece,
      getCellStyle,
      getTetrominoColor
    }
  }
}
</script>

<style scoped>
.tetris-game-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
  min-height: 100vh;
  color: white;
}

.game-header {
  text-align: center;
  margin-bottom: 30px;
}

.game-header h1 {
  font-size: 3em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.game-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.stat-card {
  background: rgba(255,255,255,0.1);
  padding: 15px 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
  text-align: center;
  min-width: 100px;
}

.stat-label {
  font-size: 0.9em;
  opacity: 0.8;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 1.5em;
  font-weight: bold;
  color: #ffd700;
}

.game-content {
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 30px;
  align-items: start;
}

.left-panel, .right-panel {
  background: rgba(255,255,255,0.1);
  padding: 20px;
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.next-piece-container, .hold-piece-container {
  margin-bottom: 30px;
}

.next-piece-container h3, .hold-piece-container h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #ffd700;
}

.next-piece-grid, .hold-piece-grid {
  display: grid;
  grid-template-rows: repeat(4, 20px);
  gap: 1px;
  justify-content: center;
}

.next-piece-row, .hold-piece-row {
  display: grid;
  grid-template-columns: repeat(4, 20px);
  gap: 1px;
}

.next-piece-cell, .hold-piece-cell {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 2px;
}

.next-piece-cell.filled, .hold-piece-cell.filled {
  border: 1px solid rgba(255,255,255,0.5);
}

.controls-info h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #ffd700;
}

.control-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.9em;
}

.control-item .key {
  background: #34495e;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-family: monospace;
  font-weight: bold;
  min-width: 40px;
  text-align: center;
}

.game-main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.game-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
}

.control-btn {
  padding: 12px 24px;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.control-btn.start {
  background: linear-gradient(45deg, #2ecc71, #27ae60);
  color: white;
}

.control-btn.pause {
  background: linear-gradient(45deg, #f39c12, #e67e22);
  color: white;
}

.control-btn.reset {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
}

.control-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.control-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.game-board-wrapper {
  position: relative;
  background: #2c3e50;
  border: 3px solid #34495e;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.game-board {
  display: grid;
  grid-template-rows: repeat(20, 30px);
  gap: 1px;
  background: #34495e;
  outline: none;
}

.game-row {
  display: grid;
  grid-template-columns: repeat(10, 30px);
  gap: 1px;
}

.game-cell {
  width: 30px;
  height: 30px;
  background: #ecf0f1;
  border-radius: 2px;
  transition: all 0.2s ease;
  position: relative;
}

.game-cell.filled {
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}

.game-cell.current-piece {
  border: 1px solid rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.game-cell.ghost-piece {
  background: transparent !important;
}

.game-cell.clearing {
  animation: clearingEffect 0.3s ease-out;
}

@keyframes clearingEffect {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}

.game-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  backdrop-filter: blur(5px);
}

.overlay-content {
  text-align: center;
  background: rgba(255,255,255,0.1);
  padding: 40px;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.2);
}

.overlay-content h2 {
  font-size: 2.5em;
  margin-bottom: 20px;
  color: #ffd700;
}

.overlay-content p {
  font-size: 1.2em;
  margin-bottom: 15px;
  color: #ecf0f1;
}

.new-record {
  color: #ffd700 !important;
  font-weight: bold;
  font-size: 1.5em !important;
  animation: celebration 1s infinite;
}

@keyframes celebration {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.overlay-btn {
  padding: 15px 30px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  font-weight: 600;
  background: linear-gradient(45deg, #3498db, #2980b9);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.overlay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.combo-display {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.combo-text {
  font-size: 1.5em;
  font-weight: bold;
  color: #ff6b6b;
  animation: comboGlow 1s infinite;
}

@keyframes comboGlow {
  0%, 100% { text-shadow: 0 0 5px #ff6b6b; }
  50% { text-shadow: 0 0 20px #ff6b6b, 0 0 30px #ff6b6b; }
}

.level-progress {
  margin-bottom: 20px;
}

.level-progress h3 {
  text-align: center;
  margin-bottom: 10px;
  color: #ffd700;
}

.progress-bar {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.2);
  border-radius: 5px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(45deg, #4ecdc4, #44a08d);
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  margin-top: 5px;
  font-size: 0.9em;
}

.speed-display {
  margin-bottom: 20px;
  text-align: center;
}

.speed-display h3 {
  margin-bottom: 10px;
  color: #ffd700;
}

.speed-value {
  font-size: 1.2em;
  font-weight: bold;
  color: #4ecdc4;
}

.achievements h3 {
  text-align: center;
  margin-bottom: 15px;
  color: #ffd700;
}

.achievement-list {
  max-height: 200px;
  overflow-y: auto;
}

.achievement {
  display: flex;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  opacity: 0.5;
  transition: all 0.3s ease;
}

.achievement.unlocked {
  opacity: 1;
  background: rgba(255,215,0,0.2);
  border: 1px solid rgba(255,215,0,0.5);
}

.achievement-icon {
  font-size: 1.5em;
  margin-right: 10px;
}

.achievement-text {
  flex: 1;
}

.achievement-name {
  font-weight: bold;
  margin-bottom: 2px;
}

.achievement-desc {
  font-size: 0.8em;
  opacity: 0.8;
}

.particles-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.particle {
  position: absolute;
  border-radius: 50%;
}

@keyframes particleFloat {
  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .game-content {
    grid-template-columns: 200px 1fr 200px;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .game-content {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .left-panel, .right-panel {
    order: 2;
  }
  
  .game-main {
    order: 1;
  }
  
  .game-header h1 {
    font-size: 2em;
  }
  
  .game-stats {
    gap: 10px;
  }
  
  .stat-card {
    padding: 10px 15px;
    min-width: 80px;
  }
  
  .game-cell {
    width: 25px;
    height: 25px;
  }
  
  .game-board {
    grid-template-rows: repeat(20, 25px);
  }
  
  .game-row {
    grid-template-columns: repeat(10, 25px);
  }
}
</style>